<header class="flex justify-between bg-panel border-bottom">
  <div class="flex">
    <img src="../images/augury-logo.svg" class="logo" />
    <div (click)="selectElement()" class="select-element" [ngClass]="{'select-element-active': domSelectionActive}">
      <svg width="16px" height="16px" viewBox="0 0 28 26" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="pointer" transform="translate(2.000000, 2.000000)">
            <g id="point">
              <path
                class="path"
                d="M10.4848307,22.0014302 L0.996394205,21.9689396 C0.446100881,21.9641553 0,21.521612 0,20.9596252 L0,1.00065163 C0,0.448006995 0.45528388,0 0.993260896,0 L20.8048191,0 C21.3533819,0 21.79808,0.438413103 21.79808,1.00033649 L21.9493556,9.67706599"
                id="frame"
                stroke="#000000"
              ></path>
              <polygon
                class="polygon"
                id="cursor"
                fill="#000000"
                transform="translate(18.259351, 16.690224) rotate(-38.000000) translate(-18.259351, -16.690224) "
                points="17.2853408 8.69022414 23.7593509 17.7744263 19.4788724 18.3375109 20.0969384 24.3519163 18.4014965 24.6902241 17.5267532 18.6423945 12.7593509 19.3063155"
              ></polygon>
            </g>
          </g>
        </g>
      </svg>
    </div>
    <div
      class="primary-color tab-menu-title px2 py2 border-transparent mt1"
      [ngClass]="{'bg-base border-top border-right border-left selected': t.tab === selectedTab}"
      *ngFor="let t of tabs; let i = index"
      (click)="onSelect(t)"
    >
      {{t.title}}
    </div>
  </div>
  <ng-content selector="[postlude]"></ng-content>
</header>
